$(document).ready(function(){
	var slides = $('#slider ul li');
	var slideAantal = slides.length;
	var slideBreedte = 370;
	var slideHuidig = 0;

	// Zorg ervoor dat de totale breedte van #slide overeenkomt met de breedte van het aantal slides
	$('#slider ul').css('width', slideAantal * slideBreedte);

	// Functie welke wordt aangeroepen wanneer er op de vorige/volgende knoppen wordt gedrukt
	$('.navigatie a').click(function() {
		// Als op de knop 'volgende' is gedrukt...
		if ($(this).attr('id') == 'volgende') {
			// ...naar de volgende slide gaan...
			slideHuidig = slideHuidig + 1;
		}
		// ...en wanneer op de 'vorige' knop is gedrukt...
		else {
			// ...naar de vorige slide gaan
			slideHuidig = slideHuidig - 1;
		}

		// Zorg er weer voor dat de vorige/volgende knoppen goed worden weergegeven
		navigatie(slideHuidig);

		// Verschuif #slides door middel van de linker margin
		$('#slider ul').animate({
			'marginLeft' : (-slideHuidig * slideBreedte)
		});
	});

	// Functie die ervoor zorgt dat de vorige/volgende knoppen op de juiste momenten worden weergegeven
	function navigatie(slideHuidig) {
		// Bij de laatste slide de 'volgende' knop weglaten..
		if (slideAantal - 1 == slideHuidig) {
			$('#volgende').hide()
		} //...of laten zien wanneer het niet de laatste slide is
		else {
			$('#volgende').show()
		}

		// Bij de eerste slide de 'vorige' knop weglaten..
		if (slideHuidig == 0) {
			$('#vorige').hide()
		} //...of laten zien wanneer het niet de eerste slide is
		else {
			$('#vorige').show()
		}
	}

	// Zorg ervoor dat de 'vorige' knop wordt weggelaten wanneer de pagina wordt geladen
	navigatie(slideHuidig);
});